<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Martrix</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<canvas id="canvas" style="background:#fff;"></canvas>
<script>
    window.onload = function () {
        var canvas = document.querySelector('canvas'),
                context = canvas.getContext('2d'),
                w, h;
        w = canvas.width = window.innerWidth;//*****focus this*****
        h = canvas.height = window.innerHeight;

        //初始化
        var clearColor = 'rgba(0, 0, 0, .1)', //用于绘制渐变阴影
                wordColor = "#33ff33", //文字颜色
                words = "0123456789qwertyuiopasdfghjklzxcvbnm,./;'\[]QWERTYUIOP{}ASDFGHJHJKL:ZXCVBBNM<>?",
                wordsArr = words.split(''), //将文字拆分进一个数组
                font_size = 16,  //字体大小
                clumns = w / font_size, //文字降落的列数
                drops = [];

        for (var i = 0; i < clumns; i++) {
            drops[i] = 1;
        }

        function draw() {
//            debugger;
            context.save();
            context.fillStyle = wordColor;
            context.font = font_size + "px arial";
            //核心
            for (var i = 0; i < drops.length; i++) { //遍历每一列
                var text = wordsArr[Math.floor(Math.random() * wordsArr.length)];//随机取出的一个字母
                context.fillText(text, i * font_size, drops[i] * font_size);//填充文字  起始位置（0,16） 第二次 （16，）
                if (drops[i] * font_size > h && Math.random() > 0.98) {
                    drops[i] = 0; //Math.random() > 0.98 根据随机数为每一行的字母添加差异
                }
                drops[i]++;
            }
            context.restore();
        }

        //动画循环
        function drawFrame() {
            window.requestAnimationFrame(drawFrame, canvas);
            context.fillStyle = clearColor;//每次渲染添加一层0.1的黑色阴影
            context.fillRect(0, 0, w, h);
            draw();
        }

        drawFrame();

        //resize  监听屏幕宽度变化
        function resize() {
            w = canvas.width = window.innerWidth;
            h = canvas.height = window.innerHeight;
        }

        canvas.addEventListener("resize", resize);
    }
</script>
</body>
</html>